

<template>
    <view class="groupMembers">
        <!-- <image
            class="psa"
            style="width:750rpx;height:834rpx;top:0;left:0;right:0;z-index:1;"
            src="../../static/bg1.jpg"
            mode=""
        ></image> -->
        <view
            style="
                background: #fff;
                width: 750rpx;
                position: fixed;
                z-index: 100;
            "
            :style="{ height: systemInfo.statusBarHeight + 'px' }"
        ></view>
        <view
            class="slim_header d-flex a-center j-center"
            style="border-bottom: none"
            :style="{ top: systemInfo.statusBarHeight + 'px' }"
        >
            <view class="left_box" @tap="goBack">
                <image src="/static/center/back.png" class="back"></image>
            </view>
            <view class="title d-flex a-center j-between">移除成员:{{userName}}</view>
            <view class="right_box">
                <!-- <image src="/static/center/dian.png" class="dian"></image> -->
            </view>
        </view>
        <scroll-view
            :scroll-y="true"
            class="content"
            :style="{ top: `calc(  100rpx + ${systemInfo.statusBarHeight}px)` }"
        >
            <view class="box_view">
                <view class="title1 d-flex a-center j-center">退款金额</view>

                <view class="title2 d-flex j-center">
                    <text>
                        <text class="text1">¥</text>
                        <text class="text2">{{centToYuan(kickOutData.amount)}}</text>
                    </text>
                </view>

                <view class="desp_box">
                    <text
                        >{{kickOutData.value}}</text
                    >
                </view>

                <view class="control d-flex d-r a-center">
                    <view class="check_box d-flex a-center j-center" style="margin-right:10rpx;" @tap="sendToBlack=!sendToBlack">
                        <image
                            v-if="sendToBlack"
                            class="checkImg"
                            src="@/static/image/diet-menu-check-true.png"
                        ></image>
                        <image
                            v-else
                            class="checkImg"
                            src="@/static/image/sports-menu-check-false.png"
                        ></image>
                    </view>
                    禁止他再次加入<text class="text">该群</text>(可在<text class="text">群设置</text>中移除黑名单)
                </view>
            </view>


            <view class="quit_desp">
                <view class="d-flex a-center j-center" style="margin-bottom:15rpx;">
                    移除成员退费说明
                </view>

                <view class="row">
                    <text class="dot">·</text>
                    胖友付费加入群48小时内，被群主踢出群，须全额退还入群费。
                </view>
                <view class="row">
                    <text class="dot">·</text>
                    付费群友在48小时内自行退群，无需群主确认，可全额退费。
                </view>
                <view class="row">
                    <text class="dot">·</text>
                    退费到账时间1-3个工作日。
                </view>
                <view class="row">
                    <text class="dot">·</text>
                    群主收到的入群费结算时间为7天，7天内群主将[付费群友]移出，将扣除手续费后退还胖友入群费。
                </view>
            </view>
        </scroll-view>



        <view class="btn_bottom_box">
            <view class="btn_main_r" @tap="KickOut">
                <text class="text">确认移除</text>
            </view>
                <view class="bottom_seat"></view>
        </view>

    </view>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { onReady, onShow, onLoad } from "@dcloudio/uni-app";
import { userData as userDataStore } from "@/store/userData";
import { systemInfo as systemInfoStore } from "@/store/systemInfo";
import { beforeKickOut,groupKickOut} from "@/api/api";
import { getFriendList } from "@/hooks/imHooks";
import { imStore as imStore1 } from "@/store/imStore";
import { wait, showLoading, closeLoading } from "@/utils/utils";
import { centToYuan } from "@/utils/format";

const imStore: any = imStore1();
const systemInfo: any = systemInfoStore();

const kickOutData = ref({});

const sendToBlack = ref(false); 




const goUserDetail = (userId: any) => {
    uni.navigateTo({
        url: `/pages/personalCenter/personalCenter?userId=${userId}`,
    });
};

const groupId = ref('')
const userId = ref('')
const userName = ref('')


const goBack = () => {
    uni.navigateBack();
};

const formatRole = (role) => {
    if (role === "Owner") {
        return "群主";
    }

    if (role === "Admin") {
        return "管理员";
    }
    if (role === "Member") {
        return "成员";
    }
    if (role === "Tourist") {
        return "游客";
    }

    return "未知";
};

const getBeforeKickOutMsg = async()=>{
    const params = {
        userId:userId.value,
        groupId:groupId.value,
    }


    const res = await beforeKickOut(params);
    const {flag,data} = res;
    if(flag!==1){
        return;
    }
    kickOutData.value = data;

}

let loading = false;

const KickOut =async ()=>{

    if(loading){
        return;
    }

    loading = true;
    uni.showLoading('移除中...');

    const params = {
        userId:userId.value,
        groupId:groupId.value,
        isJoinBlacklist:sendToBlack.value?1:0,
    }
    const res = await groupKickOut(params).catch(()=>{
        closeLoading();
        loading=false;
    })

    loading=false;
    const {flag} = res;

    if(flag!==1){
        uni.showToast({
            icon: "none",
            title: "移除成员失败，请稍后再试",
            duration: 2000,
        });
        return;
    }

    setTimeout(()=>{
        uni.showToast({
            icon: "success",
            title: "已移除成员",
            duration: 2000,
        });
    },2000)


    setTimeout(()=>{
        goBack();
    },3000)

}






let offset = 0;




onReady(() => {});

onLoad((option: any) => {
    groupId.value = option.groupId;
    userId.value = option.userId;
    userName.value = option.userName;
    getBeforeKickOutMsg();
});

onShow(() => {});
</script>

<style lang="scss" scoped>
.groupMembers {
    width: 750rpx;
    height: 100vh;
    background: #fff;

    .check_box {
        width: 32rpx;
        height: 32rpx;
        .checkImg {
            width: 32rpx;
            height: 32rpx;
        }
    }

    .content {
        position: absolute;
        width: 750rpx;
        left: 0;
        right: 0;
        bottom:0;
        background: #f5f5f5;
        overflow: hidden;

        .box_view {
            width: 710rpx;
            background: #fff;
            margin: 0 auto;
            margin-top: 20rpx;
            overflow: hidden;
            border-radius: 10rpx;

            .title1 {
                color: #333;
                font-size: 30rpx;
                margin-top: 60rpx;
            }
            .title2 {
                margin-top: 40rpx;
                .text1 {
                    font-size: 30rpx;
                    margin-right: 3rpx;
                }
                .text2 {
                    font-family: 'din',DINAlternate-Bold, DINAlternate;
                    font-size: 50rpx;
                    font-weight: bold;
                }
            }

            .desp_box {
                width: 650rpx;
                padding: 20rpx 25rpx;
                background: #f5f5f5;
                border-radius: 10rpx;
                margin: 0 auto;
                font-size: 28rpx;
                color: #666666;
                line-height: 40rpx;
                margin-top: 70rpx;
            }

            .control{
                padding:0 30rpx;
                font-size:24rpx;
                color:#666;
                margin-top:50rpx;
                margin-bottom:40rpx;
                .text{
                    color:#FAB66B;
                }
            }
        }

        .quit_desp{
            margin-top:30rpx;
            color:#999;
            font-size:28rpx;
            .row{
                position: relative;
                .dot{
                    position: absolute;
                    left:0;
                    top:0rpx;
                }
                width:650rpx;
                margin:0 auto;
                line-height:50rpx;
                padding-left:30rpx;
            }
        }
    }
}
</style>
